<template>
	<view class="box">
		<!-- 树 -->
		<view class="tree">
			<image v-if="waternum>=60" class="shumu" mode="aspectFill"
				src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%B5%87%E6%B0%B4%E5%9B%BE/shu4.png?sign=6681df42e9403e358cba8a8328034b2e&t=1616914187">
			</image>
			<image v-if="waternum>=40 && waternum<60" class="zhongshu" mode="aspectFill"
				src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%B5%87%E6%B0%B4%E5%9B%BE/shu3.png?sign=3c32e27a460af4f65009687bef820fd8&t=1616914176">
			</image>
			<image v-if="waternum>=20 && waternum<40" class="xiaoshu" mode="aspectFill"
				src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%B5%87%E6%B0%B4%E5%9B%BE/shu2.png?sign=29b81a144ce6c2e6388b26e56523a455&t=1616914167">
			</image>
			<image v-if="waternum>=0 && waternum<20" class="youshu" mode="aspectFill"
				src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%B5%87%E6%B0%B4%E5%9B%BE/shu1.png?sign=e51499dec7737fdd4b29e5796da88986&t=1616914160">
			</image>
			<image v-if="waterbool" class="water"
				src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%B5%87%E6%B0%B4%E5%9B%BE/shuidi.png?sign=9818fdfbf47992a1974eac86627fe4cd&t=1616914234">
			</image>
			<image mode="aspectFill" class="shupan"
				src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%B5%87%E6%B0%B4%E5%9B%BE/shupan.png?sign=3fc05923ed29aceadeae1b84b84d8517&t=1616914216">
			</image>
		</view>
		<!-- 浇水动画-->
		<view class="bottle" :style="{opacity:bottle?1:0}" :class="tree?'bottle-fadeIn':''"
			@nimationstart="bottlestart">
			<image mode="aspectFill"
				src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%B5%87%E6%B0%B4%E5%9B%BE/shuihu.png?sign=11ce7a9aaf2956a8ed8ce68f03d43492&t=1616914258">
			</image>
		</view>
		<!-- 浇水壶-->
		<view class="bot_s">
			<view class="imgs_box" @click="jiaoshui">
				<image mode="aspectFill" class="shuipan"
					src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%B5%87%E6%B0%B4%E5%9B%BE/shuidipan.png?sign=cb27bf3916b742881774592255e9fde6&t=1616914247">
				</image>
				<image mode="aspectFill" class="shuihu"
					src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%B5%87%E6%B0%B4%E5%9B%BE/shuihu.png?sign=3ff115c6c5342ae19d9b20f957de9c41&t=1616914306">
				</image>
				<view class="text">{{water}}g</view>
			</view>
		</view>
		<!--背景图-->
		<image mode="aspectFill" class="tree_bg"
			src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%B5%87%E6%B0%B4%E5%9B%BE/bg.jpg?sign=9546435ffe8a074e3636ee8e398bfdb2&t=1616914087">
		</image>
		<view style="z-index: 999;position: absolute;padding-left: 35%;padding-top: 100rpx;">
			<soure :url="url"></soure>
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				tree: false,
				waternum: 0,
				waterbool: false,
				bottle: false,
				water: 60,
				url: 'https://blog.csdn.net/qq_45645051/article/details/108238886?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161653957916780266253484%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=161653957916780266253484&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-5-108238886.first_rank_v2_pc_rank_v29&utm_term=130%E8%A1%8C%E4%BB%A3%E7%A0%81%E6%A8%A1%E4%BB%BF%E2%80%9C%E8%9A%82%E8%9A%81%E5%91%80%E5%98%BF%E2%80%9D%E7%89%B9%E6%95%88'
			}
		},
		onLoad() {
			_this = this
		},
		methods: {
			//浇水
			jiaoshui() {
				if (!this.bottle) {
					if (_this.water > 0) {
						_this.water = _this.water - 20
						setTimeout(function() {
							_this.waterbool = true
						}, 600)
					} else {
						uni.showToast({
							title: '水滴不足'
						})
						return;
					}
					this.bottle = true
					this.tree = true
					setTimeout(function() {
						_this.waternum = _this.waternum + 20
						_this.bottle = false
						_this.tree = false
						_this.waterbool = false
					}, 1000)
				}
			},
		},
	}
</script>

<style lang="scss">
	.box {
		width: 100%;
		overflow: hidden;
		position: relative;
		height: 100vh;
	}

	.tree {
		width: 100%;
		height: 792rpx;
		position: absolute;
		bottom: 20%;

		.youshu {
			width: 170rpx;
			height: 180rpx;
			position: absolute;
			bottom: 60rpx;
			z-index: 10;
			left: 50%;
			margin-left: -85rpx;
		}

		.shumu {
			width: 470rpx;
			height: 620rpx;
			position: absolute;
			bottom: 72rpx;
			z-index: 10;
			left: 50%;
			margin-left: -235rpx;
		}

		.zhongshu {
			width: 400rpx;
			height: 550rpx;
			position: absolute;
			bottom: 72rpx;
			z-index: 10;
			left: 50%;
			margin-left: -200rpx;
		}

		.xiaoshu {
			width: 250rpx;
			height: 480rpx;
			position: absolute;
			bottom: 72rpx;
			z-index: 10;
			left: 50%;
			margin-left: -95rpx;
		}
	}

	.bottle {
		position: absolute;
		bottom: 23%;
		right: 150rpx;
		width: 180rpx;
		height: 130rpx;
		transition: 1.8s;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
		z-index: 10;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bottle-fadeIn {
		-webkit-animation: .8s ease;
		-moz-animation: .8s ease;
		-ms-animation: .8s ease;
		animation: .8s ease;
	}

	.bottle-fadeIn {
		-webkit-animation-name: bottleFadeIn;
		-moz-animation-name: bottleFadeIn;
		-ms-animation-name: bottleFadeIn;
		animation-name: bottleFadeIn 4s;
	}

	/*水瓶动画*/
	@keyframes bottleFadeIn {
		0% {
			opacity: 0;
			bottom: 340rpx;
			right: 0;
			-webkit-transform: rotate(0deg);
		}

		100% {
			opacity: 1;
			bottom: 23%;
			right: 150rpx;
			-webkit-transform: rotate(-45deg);
		}
	}

	.tree_bg {
		width: 100vw;
		height: 100vh;
		position: absolute;
		z-index: 1;
	}

	.bot_s {
		position: absolute;
		right: 50rpx;
		bottom: 30rpx;
		z-index: 10;
	}

	.imgs_box {
		width: 214rpx;
		height: 226rpx;
		position: relative;

		.shuipan {
			width: 100%;
			height: 100%;
			position: absolute;

		}

		.shuihu {
			position: absolute;
			width: 194rpx;
			height: 138rpx;
		}

		.text {
			color: #fff;
			width: 80rpx;
			font-weight: bold;
			text-align: center;
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			margin-left: -40rpx;
		}
	}


	.shupan {
		width: 430rpx;
		height: 150rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -225rpx;
		z-index: 2;
	}

	.water {
		width: 22rpx;
		height: 33rpx;
		position: absolute;
		z-index: 99;
		bottom: -15rpx;
		left: 50%;
		transform: rotateZ(45deg);
		margin-bottom: 75rpx;
	}

</style>
